<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>积分后台管理</title>
		<link rel="icon" href="img/lei_huiyuan_on.png"  size="16x16" />
	</head>
	<body>
<div id="top">

</div>
		<div class="body content"  id="app">
			<div id="left">

			</div>

			<div class="right">

				<div class="liebie_title style_hei_16">
					<img src="img/xiugai.png">商品列表
				</div>
        <div class="bottom">

         


            <div class="tab_caozuo ">
                <div style="float:left;  margin-right:1rem;display: flex;align-items: center;" class="table_quanxuan">
                    <input type="checkbox" name="quanxuan" id="quanxuan"@click="" style="width:14px; height:14px;"> 全选
                </div>
                <div class="filter-box">
                    <div class="filter-text">
                        <input class="filter-title" type="text" readonly placeholder="操作方式"/>
                        <i class="icon icon-filter-arrow"></i>
                    </div>
                    <select name="filter">
                        <option value=""></option>
                        <option value="del">删除</option>
                    </select>
                </div>
                <input type="submit" name="Submit2" value="确定操作" class="queding style_bai_14">
            </div>

            <!--------列表开始-------->
            <table width="100%" align="center" class="tab_top baoguo " border="0" cellspacing="0" cellpadding="0">
                <tr style="background-color: #FAFAFA;">
                    <td height="40" align="center" class="" width="50px">选择</td>
                    <td align="center" class="" width="80px">序号</td>
                    <td align="left" class="">标题</td>
					<td align="left" class="">积分</td>
					<td align="left" class="">价值</td>
                    <td align="left" class="">图片</td>
                    <td align="left" class="">创建时间</td>
                    <td align="center" class="" width="180px">操作</td>
                </tr>
                
                <tr align="center" v-for="(item,index) in list"  v-cloak>
                    <td height="40" class=""><input type="checkbox"  name="check" class="tab_xuanze"  :value="item.id"></td>
                    <td align="center" class="">{{index+1}}</td>
					<td align="left" class="">{{item.name}}</td>
					<td align="left" class="">{{item.points}}</td>
                    <td align="left" class="">{{item.value}}</td>
                    <td align="left" class="table_img"><img :src="item.image_url?item.image_url.split(',')[0]:''" alt="" /></td>
                    <td align="left" class="">{{item.created_at}}</td>
                    <td align="center" class=" style_lv_9 caozuo" >
						<div class="dd_caozuo style_hong_14">
							 <p  @click="go_bianij(item.id)">编辑</p>
							 <p  @click="del(item.id)">删除</p>
						</div>
					</td>
                </tr>
                
            </table>


            <!--------分页列表开始-------->
            <!--------分页列表开始-------->
			<ul class="pagination" v-cloak>
				<li @click="xuanye(item)" v-for="item in pageCount" :class="item==page?'pagination_on':''">{{item}}</li>
			</ul>


        </div>
			</div>
		</div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/selectFilter.js" type="text/javascript" charset="utf-8"></script>
<script src="js/get.js" type="text/javascript" charset="utf-8"></script>
<script src="js/fengzhuang.js"></script>
<script src="js/gong.js"></script>
<script src="js/vue.js"></script>
<script>
	var app = new Vue({
	    el: '#app',
	    data:{
	        list :[],
			page:1,
			limit:10,
			pageCount:0,
			seleceAll:false
	    },
		mounted(){
			this.get_list()
		},
		methods:{
			xuanye(page){
				this.page=page
				this.get_list()
			},
			get_list(){
			    $.ajaxDirect("/api/getAllProducts",'get',{
			    	'page':this.page,
			    	'limit':this.limit
			    },
			     (obj)=> {
			    		  if(obj.code==200){
			    			  
			    			  this.list=obj.list
							  this.pageCount=Math.ceil(Number(obj.totalCount)/this.limit)

			    		  }
			    },
			    (err)=> {
			            //发送失败
			    })
			},
			del(id){
				$.ajaxDirect("/api/deleteProduct/"+id,'delete',{
					
				},
				 (obj)=> {
						  if(obj.code==200){
							  
							 layer.msg(obj.message)
							 history.go(0);
				
						  }
				},
				(err)=> {
				        //发送失败
				})
			}
	
		}
	})	
</script>
<script type="text/javascript">
    $('.filter-box').selectFilter({
        callBack: function (val) {
            //返回选择的值
            console.log(val + '-是返回的值')
        }
    });

	function go_bianij(id){
		location.href='add_shang.html?goodsid='+id
	}






    $('.queding').on("click", function () {
        var str = [];
        $("input[name='check']:checked").each(function (index, item) {
            str.push($(this).val())
        });
        var menu = $('select[name="filter"]').val();
        console.log(str, menu)
        if(menu == 'del'){
           $.ajaxDirect('/api/batchDeleteProduct','get',{
           	   productIds:str.toString()
           },
            (obj)=> {
           		  if(obj.code==200){
           			  
           			 layer.msg(obj.message)
           			 history.go(0);
           
           		  }
           },
           (err)=> {
                   //发送失败
           })
        }else{
            layer.open({content:'请选择正确操作'});
        }
    });

</script>

<script type="text/javascript">
    $('#quanxuan').click(function () {
        var flag = $(this).is(":checked");
        console.log(flag)
        $(":checkbox[name='check']").prop("checked", flag);
    })
    $('.tab_xuanze').click(function () {
        var flag = true;
        var tbodyO = $('.tab_xuanze')

        for (var j = 0; j < tbodyO.length; j++) {
            //只要存在没被勾选的复选框
            if (!tbodyO[j].checked) {
                //判断标识为假，不影响全选框
                flag = false;
                break;
            }
        }
        $('#quanxuan').prop("checked", flag)
    })
</script>
	</body>
</html>